<script>
import "github-markdown-css";
import MarkdownIt from "markdown-it";

export default {
  name: "ActivityDetail",
  data() {
    return {
      activity: {
        id: "",
        title: "",
        category: "",
        abstract1: "",
        startTime: "",
        endTime: "",
        creator: "",
        detailedDesc: "",
        picUrls: "",
      },
      ownBlog: false,
    };
  },
  methods: {
    formatDate(date) {
      const options = {
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
      };
      return new Date(date).toLocaleDateString("zh-CN", options);
    },
  },
  created() {
    const activityId = this.$route.params.activityId;
    this.$axios
        .get("/manager-activity/activity/" + activityId, {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          const activity = res.data.data;
          this.activity = activity;

          const md = new MarkdownIt();
          this.activity.detailedDesc = md.render(activity.detailedDesc);

          this.ownBlog =
              activity.creator === this.$store.getters.getUser.username;
        });
  },
};
</script>
<template>
  <div class="activity-detail">
    <!-- 背景动画效果 -->
    <div class="background">
      <div class="gradient-animation"></div>
    </div>

    <!-- 内容容器 -->
    <div class="container">
      <!-- 顶部图片与标题 -->
      <div class="header">
        <div class="image-wrapper" v-if="activity.picUrls">
          <img :src="activity.picUrls" alt="活动图片" />
          <div class="title-container">
            <div class="title-overlay">
              <h1>{{ activity.title }}</h1>
              <div class="title-decoration"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 活动主要内容 -->
      <div class="content">
        <div class="content-section">
          <h2 class="section-title">
            <span class="icon">📝</span>
            活动简介
          </h2>
          <div class="section-content">
            <p class="abstract">{{ activity.abstract1 }}</p>
          </div>
        </div>

        <div class="content-section">
          <h2 class="section-title">
            <span class="icon">📋</span>
            活动详情
          </h2>
          <div class="section-content markdown-body" v-html="activity.detailedDesc"></div>
        </div>

        <!-- 活动信息卡片 -->
        <div class="info-card">
          <div class="info-item">
            <i class="el-icon-time"></i>
            <div class="info-content">
              <span class="info-label">开始时间</span>
              <span class="info-value">{{ formatDate(activity.startTime) }}</span>
            </div>
          </div>
          <div class="info-item">
            <i class="el-icon-time"></i>
            <div class="info-content">
              <span class="info-label">结束时间</span>
              <span class="info-value">{{ formatDate(activity.endTime) }}</span>
            </div>
          </div>
          <div class="info-item">
            <i class="el-icon-user"></i>
            <div class="info-content">
              <span class="info-label">活动创建者</span>
              <span class="info-value">{{ activity.creator }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 编辑按钮 -->
      <div class="action">
        <router-link :to="`/admin/activity/${activity.id}/edit`" class="edit-link">
          <span class="edit-icon">✏️</span>
          <span class="edit-text">编辑活动</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
.activity-detail {
  min-height: 100vh;
  padding: 40px 20px;
  position: relative;
}

/* 动态背景 */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.gradient-animation {
  position: absolute;
  width: 200%;
  height: 200%;
  background: linear-gradient(
      45deg,
      #ff9a9e 0%,
      #fad0c4 25%,
      #fbc2eb 50%,
      #a6c1ee 75%,
      #ff9a9e 100%
  );
  animation: gradient 15s ease infinite;
  transform-origin: center center;
  background-size: 200% 200%;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: transform 0.3s ease;

}

.container:hover {
  transform: translateY(-5px);
}

/* 顶部图片区域 */
.header .image-wrapper {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.header .image-wrapper:hover img {
  transform: scale(1.05);
}

.title-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 30px 20px 20px;
}

.title-overlay {
  position: relative;
}

.title-overlay h1 {
  color: white;
  font-size: 2.5em;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.title-decoration {
  width: 100px;
  height: 4px;
  background: linear-gradient(to right, #ff9a9e, #fad0c4);
  margin-top: 10px;
  border-radius: 2px;
}

/* 内容区域 */
.content {
  padding: 30px;

}

.content-section {
  margin-bottom: 40px;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

.icon {
  margin-right: 10px;
  font-size: 1.2em;
}

.abstract {
  font-size: 18px;
  line-height: 1.8;
  color: #34495e;
}

/* 信息卡片 */
.info-card {
  background: linear-gradient(135deg, #f6f8fc, #f0f4f8);
  border-radius: 15px;
  padding: 25px;
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 10px;
}

.info-item i {
  font-size: 24px;
  color: #6c5ce7;
  margin-right: 15px;
}

.info-content {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.info-value {
  font-size: 16px;
  color: #2c3e50;
  font-weight: 500;
}

/* 编辑按钮 */
.action {
  padding: 0 30px 30px;
  text-align: center;
}

.edit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  background: linear-gradient(135deg, #6c5ce7, #a363d9);
  color: white;
  text-decoration: none;
  border-radius: 25px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.2);
}

.edit-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

.edit-icon {
  margin-right: 8px;
  font-size: 1.2em;
}

.edit-text {
  font-size: 16px;
}

/* Markdown 内容样式 */
:deep(.markdown-body) {
  background: transparent;
  padding: 0;
  font-size: 16px;
  line-height: 1.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    margin: 20px;
  }

  .header .image-wrapper {
    height: 200px;
  }

  .title-overlay h1 {
    font-size: 1.8em;
  }

  .content {
    padding: 20px;
  }

  .info-card {
    grid-template-columns: 1fr;
  }
}
</style>